<settings-screen>
  <group-name group="group"></group-name>

  <div class="row">
    <div class="col-lg-4">
      <ul class="tab-nav">
        <li role="presentation"><a href="groups/{{group.id}}">Members</a></li>
        <li role="presentation" class="active"><a href="groups/{{group.id}}/data_sources">Data Sources</a></li>
      </ul>
    </div>
    <div class="col-lg-8">
      <ui-select ng-model="newDataSource.selected" on-select="addDataSource($item)">
        <ui-select-match placeholder="Add Data Source"></ui-select-match>
        <ui-select-choices repeat="dataSource in foundDataSources | filter:$select.search"
                           refresh="findDataSource($select.search)"
                           refresh-delay="0">
          <div>
            {{dataSource.name}}
          </div>
        </ui-select-choices>
      </ui-select>
    </div>
  </div>
  <div class="row m-t-5">
    <div class="col-lg-12">
      <table class="table table-condensed table-hover">
        <thead>
        </thead>
        <tbody>
        <tr ng-repeat="dataSource in dataSources">
          <td> {{dataSource.name}}</td>
          <td width="280px" class="text-right">
            <div class="btn-group" uib-dropdown>
              <button type="button" class="btn btn-sm btn-default dropdown-toggle" uib-dropdown-toggle ng-if="dataSource.view_only">
                View Only <span class="caret"></span>
              </button>

              <button type="button" class="btn btn-sm btn-success dropdown-toggle" uib-dropdown-toggle ng-if="!dataSource.view_only">
                Full Access <span class="caret"></span>
              </button>

              <ul class="dropdown-menu" role="menu" uib-dropdown-menu>
                <li><a ng-click="changePermission(dataSource, false)"><small ng-if="!dataSource.view_only"><span class="fa fa-check"/></small> Full Access<br/></a></li>
                <li><a ng-click="changePermission(dataSource, true)"><small ng-if="dataSource.view_only"><span class="fa fa-check"/></small> View Only</a></li>
              </ul>
            </div>

            <button class="pull-right btn btn-sm btn-danger" ng-click="removeDataSource(dataSource)">Remove</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</settings-screen>
